<template>
  <div>
        <!-- 支付宝绑定弹窗 -->
        <Modal
            width="800"
            class="er-modal er-modal-recharge"
            :closable="false"
            :mask-closable="false"
            :value="show">
            
            <!-- 进度条 -->
            <div class="er-header" slot="header">
                <ol class="er-header__list">
                    <li v-for="(item, key) in items" :key="key" :class="['er-header__item', {'active' : step >= key}]">
                        <a href="javascript:void 0" :class="{
                            'er-header__box': true,
                            'is-active': step >= key
                        }">{{item}}</a>
                    </li>
                </ol>
                <div class="er-header__back" :style="{width: backWidth}"></div>
            </div>

            <!-- 弹窗尾部 -->
            <Row slot="footer">
                <Button type="text" @click="prev(step)">{{prevButtonName}}</Button>
                <Button type="primary" @click="next(step)" v-if="step < 3">{{nextButtonName}}</Button>
            </Row>

            <!-- 绑定swiper步骤 -->
            <Carousel v-model="step" dots="none" arrow="never" v-if="show" :class="userType == '个人用户' ? 'private' : 'company'">
                <!-- 选择用户账户类型 -->
                <CarouselItem id="one">
                    <div id="account">
                        <div class="accountTitle">
                            <p>选择账户类型</p>

                            <div class="wrap">
                                <RadioGroup v-model="userType" type="button" size="large">
                                    <Radio label="个人用户" value="个人用户"></Radio>
                                    <Radio label="企业用户" value="企业用户"></Radio>
                                </RadioGroup>
                            </div>
                        </div>

                        <p class="child-title">请准备以下资料</p>
                        <div class="wrap no-mar">
                            <div v-if="userType == '个人用户'" class="wrap-flex">
                                <p>1.身份证原件正反面拍照</p>
                                <p>2.手持身份证原件拍照</p>
                                <p>3.个人签名</p>
                            </div>
                            <div v-if="userType == '企业用户'" class="wrap-flex">
                                <p>1.企业营业执照</p>
                                <p>2.法人身份证正反面拍照</p>
                                <p>3.开户许可证</p>
                            </div>
                        </div>
                   </div>
                </CarouselItem>

                <!-- 提交资料和文件 -->
                <CarouselItem id="two">
                    <div id="data">
                        <p class="title">提交资料和文件</p>
                        <Form
                            style="padding-left: 20px"
                            ref="data"
                            :model="params"
                            :rules="rules"
                            label-position="right"
                            :label-width="130"
                            :show-message="false">
                            <!-- 将企业和个人字段集成为配置文件，breakPoint为断点，表示有几个是需要上传图片和文件的组件 -->
                            <FormItem :label="names[index]" :prop="item" v-for="(item, index) in keys" :key="index">
                                <i-input v-model.trim="params[item]" v-if="index + breakPoint + 1 <= keys.length && item !== 'industry'"></i-input>
                                <p v-if="item == 'biz_name'">请填写{{bizTitle}}</p>
                                <p v-if="item == 'phone_no' && clientPhone !== ''">商户手机号为: {{clientPhone}}</p>
                                <c-upload v-model="params[item]" v-if="index + breakPoint + 1 > keys.length && item !== 'industry'"></c-upload>
                                <Select placeholder="请选择所属行业" filterable v-model="params[item]" v-if="item == 'industry'" >
                                    <Option v-for="(item, index) in industrys" :value="item.code" :key="index">{{ item.desc }}</Option>
                                </Select>
                            </FormItem>
                        </Form>
                    </div>
                </CarouselItem>

                <!-- 收款账户配置 -->
                <CarouselItem id="three">
                    <div id="account">
                        <p class="title">收款账户配置</p>
                        <Form
                            style="padding-left: 20px"
                            ref="bank"
                            :model="params"
                            :rules="bankRules"
                            label-position="right"
                            :label-width="150"
                            :show-message="false">

                            <FormItem label="银行账户类型" v-if="userType == '企业用户'">
                                对公账户
                            </FormItem>

                            <!-- 银行户名 -->
                            <FormItem label="银行户名" prop="account_name">
                                <i-input v-model.trim="params.account_name"></i-input>
                            </FormItem>

                            <!-- 银行账号 -->
                            <FormItem label="银行账号" prop="account_no">
                                <i-input v-model.trim="params.account_no"></i-input>
                            </FormItem>

                            <!-- 联系人地址 -->
                            <FormItem label="联系人地址" prop="contact_address">
                                <i-input v-model.trim="params.contact_address"></i-input>
                            </FormItem>

                            <FormItem label="持卡人手机号" prop="bank_card_phone_no" v-if="userType == '个人用户'">
                                <i-input v-model.trim="params.bank_card_phone_no"></i-input>
                            </FormItem>

                            <!-- 开户行 -->
                            <FormItem label="开户行" prop="account_bank_province_id">
                                <Row class="margin-bottom-10" type="flex" :gutter="8">

                                    <!-- 开户行所在省份 -->
                                    <Col span="12">
                                        <Select placeholder="开户行所在省" filterable @on-change="getPayCountry" v-model="params.account_bank_province_id">
                                            <Option v-for="item in provinces" :value="item.id" :key="item.name">{{ item.name }}</Option>
                                        </Select>
                                    </Col>

                                    <!-- 开户行所在区域 -->
                                    <Col span="12">
                                        <Select placeholder="开户行所在县" v-model="params.account_bank_county_id">
                                            <Option v-for="item in countrys" :value="item.id" :key="item.id">{{ item.name }}</Option>
                                        </Select>
                                    </Col>
                                </Row>
                            </FormItem>

                            <FormItem label="请输入具体支行名称" prop="account_bank_name">
                                <i-input v-model.trim="params.account_bank_name"></i-input>
                            </FormItem>

                            <FormItem label="所属联行号" prop="relate_bank_no" class="special">
                                <!-- <i-input v-model.trim="params.relate_bank_no"></i-input>
                                <a href="/v3/file/111?name=联行号.xlsx" target="_blank">联行号清单</a> -->
                                <Select placeholder="请选择所属联行号" v-model="params.relate_bank_no" filterable>
                                    <Option v-for="item in banks" :value="item.pay_bank_id" :key="item.pay_bank_id">{{ item.name }} - {{ item.pay_bank_id }}</Option>
                                </Select>
                            </FormItem>

                            <p class="config-title">注：门店独立收款账户可在功能开通后，在“门店”中设置</p>

                            <!-- <div>  -->
                            <div v-if="clientPhone !== ''">
                                <p class="title" style="margin-top: 30px;margin-bottom: 30px !important;">选择手续费承担方</p>

                                <div class="wrap" style="margin-bottom: 30px;">
                                    <RadioGroup v-model="poundage_type" type="button" size="large">
                                        <Radio :label="1">公寓运营方承担</Radio>
                                        <Radio :label="2">租客承担</Radio>
                                    </RadioGroup>
                                </div>
                                <div class="wrap no-mar">
                                    <div v-if="poundage_type == 1">
                                        <p>租客充值100元，到账电费100元（根据电价折合后充入电量）公寓运营方收款账户T+1 到账99.4元</p>
                                    </div>
                                    <div v-if="poundage_type == 2">
                                        <p>租客充值100元，到账电费99.4元（根据电价折合后充入电量）公寓运营方收款账户T+1 到账100元</p>
                                    </div>
                                </div>
                            </div>
                        </Form>
                    </div>
                </CarouselItem>

            </Carousel>

        </Modal>
  </div>
</template>

<script>
import validate from '@/libs/validate.js'
import CUpload from '@/components/upload/upload'
import { http, api } from '@/libs/http'
const company = {
  keys: [
    'company_name',
    'industry',
    'id_card',
    'trading_no',
    'company_address',
    'registered_capital',
    'social_credit_code',
    'tax_no',
    'organization_code',
    'legal_person_name',
    'biz_name',
    'phone_no',
    'contact_phone',
    'customer_phone',
    'contact',
    'email',
    'id_card_front',
    'id_card_reverse',
    'trading_img',
    'license'
  ],
  names: [
    '公司名称',
    '所属行业',
    '法人身份证号码',
    '营业执照注册号',
    '公司注册地址',
    '注册资金',
    '统一社会信用代码',
    '税务登记号',
    '组织结构代码',
    '法人名称',
    '商户名称',
    '手机号码',
    '联系人号码',
    '客服号码',
    '联系人',
    '邮箱',
    '法人身份证正面',
    '法人身份证反面',
    '营业执照照片',
    '开户许可证'
  ],
  breakPoint: 4
}
const personal = {
  keys: [
    'biz_name',
    'user_name',
    'phone_no',
    'id_card',
    'contact',
    'email',
    'contact_phone',
    'customer_phone',
    'id_card_img',
    'hand_id_card_img',
    'bank_card_img',
    'branch_img'
  ],
  names: [
    '商户名称',
    '姓名',
    '手机号码',
    '身份证号',
    '联系人',
    '联系邮箱',
    '联系电话',
    '客服电话',
    '身份证照片',
    '手持身份证照片',
    '银行卡照片',
    '门店照片'
  ],
  breakPoint: 4
}
const commonKeys = [
  'account_name',
  'account_no',
  'contact_address',
  'account_bank_province_id',
  'account_bank_county_id',
  'account_bank_name',
  'relate_bank_no'
]
export default {
  data () {
    return {
      items: ['选择账户类型', '提交资料和文件', '收款账户配置'],
      step: 0,
      userType: '个人用户', // 用户类型
      params: {},
      rules: {},
      keys: [],
      names: [],
      breakPoint: 0,
      banks: [],
      provinces: [],
      countrys: [],
      industrys: [],
      poundage_type: 1,
      bankRules: {
        account_name: { required: true },
        account_no: { required: true },
        contact_address: { required: true },
        account_bank_province_id: { required: true },
        account_bank_county_id: { required: true },
        account_bank_name: { required: true },
        relate_bank_no: { required: true },
        bank_card_phone_no: { required: true }
      }
    }
  },

  components: { CUpload },

  watch: {
    /**
         *  用户类型发生改的
         */
    userType (newVal) {
      // this.dataParams = {}
      this.constructionData()
    },

    dataParams (Val) {
      this.constructionData()
    },

    accountName (val) {
      if (val !== '') {
        this.constructionData()
      }
    },

    step (value) {
      const $dom = document.querySelector('.ivu-carousel-track')
      if (value === 0) {
        $dom.style.maxHeight = '487px'
      } else if (value === 1) {
        if (this.userType === '个人用户') $dom.style.maxHeight = '845px'
        else $dom.style.maxHeight = '1327px'
      } else {
        $dom.style.maxHeight = this.clientPhone === '' ? '540px' : '747px'
        // $dom.style.maxHeight = '747px';
      }
    },

    provinceId (Val) {
      if (Val !== '') {
        this.getPayCountry(Val)
      }
    }
  },

  computed: {
    /**
        * 商户名称的提示
        */
    bizTitle () {
      return this.userType === '个人用户' ? '公寓名称' : '营业执照上的企业名称'
    },

    backWidth () {
      return (this.step + 1) * 33.333 + '%'
    },

    /**
         * 上一步按钮文案
         */
    prevButtonName () {
      if (this.step === 0) {
        return '取消'
      } else {
        return '上一步'
      }
    },

    // disable() {
    //     if (!this.dataParams.params) { // 如果不是由外部传参进来
    //         return false
    //     } else {
    //         return true
    //     }
    // },

    /**
         * 下一步按钮文案
         */
    nextButtonName () {
      if (this.step === 0) {
        return '确定'
      } else if (this.step === 1) {
        return '下一步'
      } else {
        return '提交'
      }
    },

    provinceId () {
      return this.params.account_bank_province_id
    }
  },

  mounted () {
    this.constructionData()
    this.getIndustry()
    this.getPayBanks()
    this.getPayProvinces()
  },

  props: {
    show: {
      required: true,
      type: Boolean
    },
    dataParams: {
      type: Object,
      default: true
    },
    accountName: {
      type: String,
      default: ''
    },
    clientPhone: {
      type: String,
      default: ''
    },
    turnToStep: {
      default: 1,
      type: Number
    }
  },

  methods: {
    /**
         * 获取支付联航号
         */
    getPayBanks () {
      http.request(this, api.pay_banks, null, {platform: 1}, res => {
        if (res) {
          this.banks = res
        }
      })
    },

    /**
         * 构造表单数据
         */
    constructionData () {
      const hasParams = !!this.dataParams.params

      if (hasParams) {
        const { account_type, poundage_type } = this.dataParams.params
        this.userType = account_type === 1 ? '个人用户' : '企业用户'
        this.poundage_type = poundage_type
      }

      const config = this.userType === '个人用户' ? personal : company
      const { keys, breakPoint, names } = config
      const { length } = keys
      let obj = {}
      let rules = {}

      keys.forEach((key, index) => {
        if (index + breakPoint + 1 > length) {
          obj[key] = hasParams ? this.dataParams.params[key] : { id: '', name: '' }
          rules[key] = {
            required: true,
            validator: validate.validFileObject
          }
        } else {
          obj[key] = hasParams ? this.dataParams.params[key] : ''
          if (hasParams) {
            obj[key] = this.dataParams.params[key]
          }
          rules[key] = { required: true }
        }
      })

      if (hasParams) {
        commonKeys.forEach(key => {
          obj[key] = this.dataParams.params[key]
        })
        if (this.userType === '个人用户') {
          obj['bank_card_phone_no'] = this.dataParams.params['bank_card_phone_no']
        }

        setTimeout(() => {
          // 如果为修改参数的时候自动跳到相关页面
          this.step = this.turnToStep
        }, 500)
      } else {
        commonKeys.forEach(key => {
          obj[key] = ''
        })

        if (this.userType === '个人用户') {
          obj['bank_card_phone_no'] = ''
        }
      }
      this.params = obj
      this.rules = rules
      this.keys = keys
      this.names = names
      this.breakPoint = breakPoint
    },

    /**
         * 打开或者关闭弹窗
         */
    setVisibility (val) {
      this.$emit('update:show', val)
      this.step = 0
    },

    /**
         * 上一步
         */
    prev (step) {
      if (!this.step) {
        this.setVisibility(false)
        return
      }
      this.step--
      // this.step === 3 ? this.setVisibility(false) : this.step--
    },

    /**
         * 下一步
         */
    next (step) {
      // if (this.step > 3) {
      //     return
      // }

      if (this.step === 1) {
        // this.step++
        this.checkForm()
      } else if (this.step === 2) {
        // this.step++
        this.handleSubmit()
      } else {
        this.step++
      }
    },

    /**
         *  核查个人或者公司是否都填写完全
         */
    checkForm () {
      this.$refs['data'].validate(valid => {
        const reg = /^\+?[1-9][0-9]*$/
        if (this.userType === '企业用户' && !reg.test(this.params.registered_capital)) {
          this.$Message.error('注册资金只能为数字')
          return
        }
        if (!valid) {
          this.$Message.error('请完整填完审核资料!')
          return
        }
        this.step++
      })
    },

    /**
         * 提交表单数据
         */
    handleSubmit () {
      this.$refs['bank'].validate(valid => {
        if (!valid) {
          this.$Message.error('请完整填完审核资料!')
          return
        }

        let account_type
        if (this.userType === '个人用户') {
          account_type = 1
        } else {
          account_type = 2
        }

        const params = {
          audit_type: 1,
          audit_params: {
            ...this.params,
            poundage_type: this.poundage_type,
            account_type
          }
        }
        this.setVisibility(false)
        this.$emit('confirm', params)
      })
    },

    /**
         * 获取所有行业类型
         */
    getIndustry () {
      http.request(this, api.industry_list, null, null, res => {
        if (res) {
          this.industrys = res
        }
      })
    },

    /**
         * 获取所有的省份
         */
    getPayProvinces () {
      http.request(this, api.pay_provinces, null, { platform: 1 }, res => {
        if (res) {
          this.provinces = res
        }
      })
    },

    /**
         * 获取所有的城市
         */
    getPayCountry (province_id) {
      const params = {
        platform: 1,
        parent_id: province_id
      }
      http.request(this, api.pay_country, null, params, res => {
        if (res) {
          this.countrys = res
        }
      })
    }
  }
}
</script>
<style lang='less' scoped>
.special {
    .ivu-form-item-content {
        display: flex;
    }
    .ivu-input-wrapper {
        width: 80%;
    }
    a {
        margin-left: 5px;
        color: #05bac5;
    }
}

.er {
    &-header {
        position: relative;

        &__list {
            list-style: none;
            display: flex;
            position: relative;
            z-index: 1;
        }

        &__item {
            width: 33.33333%;
            text-align: center;
            font-size: 14px;
            border-right: 1px solid rgba(151, 151, 151, .45);
            background: #EFEFF1;
            transition: all .3s;

            &:last-child {
                border:none;
            }
        }

        .active {
            border: none;
            background: none;
        }

        &__box {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            margin: 0 auto;
            color: #5B5B5B;

            &.is-active {
                border-bottom-color: rgb(0, 173, 247);
                color: #fff
            }
        }

        &__back {
            position: absolute;
            width: 0;
            height: 100%;
            left: 0px;
            top: 0px;
            background: #05bac5;
            z-index: 0;
            transition: all .3s;
        }
    }
    
}

.accountTitle {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);

    p {
        font-size: 22px;
        padding-bottom: 20px;
        margin: 0px!important;
        box-sizing: border-box;
        padding-top: 8px;
    }
}
.title {
    font-size: 22px;
    text-align: left !important;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    margin-bottom: 20px !important;
}
.wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;

    &-flex {
        display: flex;

        p {
            margin-right: 20px;
        }
    }
}
#account {
    p {
        text-align: center;
        margin-bottom: 10px;
    }
    .child-title {
        font-size: 22px;
        padding-top: 140px;
    }
}
.wrap p {
    text-align: left !important;
}
.no-mar {
    margin: 0px !important;
}
.ivu-carousel-item > div {
    width: 95%;
    margin: 0 auto;
}
.er-modal-recharge .ivu-modal-header {
    border: none;
    background: none;
    padding: 0;
}
// .private {
//     #one {
//         margin-top: 241px;
//     }
//     #two {
//         margin-top: 176px;
//     }
//     #four {
//         margin-top: 312px;
//     }
// }
// .company {
//     #one {
//         margin-top: 373px;
//     }
//     #three {
//         margin-top: 134px;
//     }
//     #four {
//         margin-top: 443px;
//     }
// }
</style>